<template>
    <div>
        <myheader :img_src="img_src"/>
        {{userinfo}}
        <br>
        {{img_src}}
        <h1>用户中心</h1>
        用户名：{{username}}
        <br>
        手机号：{{userinfo.mobile | mobilefilter}} 
        <br>
        头像展示：

        <van-image
            width="100"
            height="100"
            :src= imgurl
        />

        <br>
        头像上传:
        <van-uploader :after-read="myupload" />

        <br>
        多文件上传：
        <van-uploader v-model="fileList" multiple :max-count="2" :after-read="allupload" :max-size="500 * 1024" @oversize="onOversize" />




    </div>
</template>

<script>
import myheader from './myheader.vue'
import { Toast } from 'vant';
    export default {
        components:{
        'myheader':myheader,
        
    },
    data(){
        return{
            username:'',
            mobile:'',
            username:localStorage.getItem('username'),
            userid:localStorage.getItem('userid'),
            userinfo:{mobile:''},
            imgurl:'',
            img_src:'',
            fileList:[]
        }
    },
    // 手机号只显示三位
    filters:{
        mobilefilter(value){
            return value.slice(0,3)+'*****'+value.slice(-3,-1)
        }
    },
    //方法
    methods: {
        //展示图片
        getuserinfo(){
            this.$axios.get('/users/getuserinfo/?userid='+this.userid).then(res=>{
                this.userinfo=res.data.list
                // this.img_src =this.upload_dir+res.data.list.avater
                
            })
        
        },
        //单文件上传
        myupload(file){
            console.log(file)
            //往后台发
            let data = new FormData()
            data.append('file',file.file)
            data.append('userid',this.userid)
            this.$axios.post('users/upload/',data).then(res=>{
                //展示  this.upload_dir 是在main里边封装的常量 很多地方都会用到
                this.imgurl =this.upload_dir +this.userid+'/'+ res.data.filename
            })
        },
        //多文件上传
        allupload(file){
            //循环文件一个一个上传
            for(var i=0;i<this.fileList.length;i++){
                var file = this.fileList[i]
                this.myupload(file)
            }
        },
        //多文件上传的大小不能过500kb'
        onOversize(file){
            console.log(file);
            Toast('文件大小不能超过 500kb');
        }
    },
    mounted() {
        this.getuserinfo()
    },
}
</script>

<style scoped>

</style>